import logo from './logo.svg';
import './App.css';
import { Layout, Menu } from 'antd';
import { DesktopOutlined, PieChartOutlined, FileOutlined } from '@ant-design/icons';
import React from 'react';
import { BrowserRouter as Router, Link, Route, Switch } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

const { Header, Content, Sider } = Layout;
export default function App() {
  const clickMenu = function(){
    // react hash 模式直接跳转路由不会响应，需要触发一下 hash 事件
    const event = new Event('hashchange');
    window.dispatchEvent(event);
  }
  return (
    <div className="App">
      <Router>
        <Layout style={{ minHeight: '100vh' }}>
          <Sider collapsible width="300">
            <div className="logo" >
              <img src={ logo } alt=""/>
            </div>
            <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
              <Menu.Item key="/home" icon={<PieChartOutlined />}>
                <Link to="/home">主项目 home 页面</Link>
              </Menu.Item>
              <Menu.Item key="/about" icon={<DesktopOutlined />}>
                <Link to="/about">主项目 about 页面</Link>
              </Menu.Item>
              <Menu.Item key="/app-angular7-hash/#/first" icon={<FileOutlined />}>
                <Link to="/app-angular7-hash/#/first">angular7-hash项目 first 页面</Link>
              </Menu.Item>
              <Menu.Item key="/app-angular7-hash/#/second" icon={<PieChartOutlined />}>
                <Link to="/app-angular7-hash/#/second">angular7-hash项目 second 页面</Link>
              </Menu.Item>
              <Menu.Item key="/app-angular7-history/first" icon={<DesktopOutlined />}>
                <Link to="/app-angular7-history/first">angular7-history项目 first 页面</Link>
              </Menu.Item>
              <Menu.Item key="/app-angular7-history/second" icon={<FileOutlined />}>
                <Link to="/app-angular7-history/second">angular7-history项目 second 页面</Link>
              </Menu.Item>
              <Menu.Item key="/app-angular9-hash/#/first" icon={<PieChartOutlined />}>
                <Link to="/app-angular9-hash/#/first">angular9-hash项目 first 页面</Link>
              </Menu.Item>
              <Menu.Item key="/app-angular9-hash/#/second" icon={<DesktopOutlined />}>
                <Link to="/app-angular9-hash/#/second">angular9-hash项目 second 页面</Link>
              </Menu.Item>
              <Menu.Item key="/app-angular9-history/first" icon={<FileOutlined />}>
                <Link to="/app-angular9-history/first">angular9-history项目 first 页面</Link>
              </Menu.Item>
              <Menu.Item key="/app-angular9-history/second" icon={<PieChartOutlined />}>
                <Link to="/app-angular9-history/second">angular9-history项目 second 页面</Link>
              </Menu.Item>
              <Menu.Item key="/app-jquery" icon={<DesktopOutlined />}>
                <Link to="/app-jquery">jquery项目</Link>
              </Menu.Item>
              <Menu.Item key="/app-react16-hash/#/home" onClick={clickMenu} icon={<FileOutlined />}>
                <Link to="/app-react16-hash/#/home">react16-hash项目 home 页面</Link>
              </Menu.Item>
              <Menu.Item key="/app-react16-hash/#/about" onClick={clickMenu} icon={<PieChartOutlined />}>
                <Link to="/app-react16-hash/#/about">react16-hash项目 about 页面</Link>
              </Menu.Item>
              <Menu.Item key="/app-react16-history/home" icon={<DesktopOutlined />}>
                <Link to="/app-react16-history/home">react16-history项目 home 页面</Link>
              </Menu.Item>
              <Menu.Item key="/app-react16-history/about" icon={<FileOutlined />}>
                <Link to="/app-react16-history/about">react16-history项目 about 页面</Link>
              </Menu.Item>
              <Menu.Item key="/app-vue2-hash/#/home" icon={<PieChartOutlined />}>
                <Link to="/app-vue2-hash/#/home">vue2-hash项目 home 页面</Link>
              </Menu.Item>
              <Menu.Item key="/app-vue2-hash/#/about" icon={<DesktopOutlined />}>
                <Link to="/app-vue2-hash/#/about">vue2-hash项目 about 页面</Link>
              </Menu.Item>
              <Menu.Item key="/app-vue2-history/home" icon={<FileOutlined />}>
                <Link to="/app-vue2-history/home">vue2-history项目 home 页面</Link>
              </Menu.Item>
              <Menu.Item key="/app-vue2-history/about" icon={<DesktopOutlined />}>
                <Link to="/app-vue2-history/about">vue2-history项目 about 页面</Link>
              </Menu.Item>
              <Menu.Item key="/app-vue3-hash/#/home" icon={<FileOutlined />}>
                <Link to="/app-vue3-hash/#/home">vue3-hash项目 home 页面</Link>
              </Menu.Item>
              <Menu.Item key="/app-vue3-hash/#/about" icon={<PieChartOutlined />}>
                <Link to="/app-vue3-hash/#/about">vue3-hash项目 about 页面</Link>
              </Menu.Item>
              <Menu.Item key="/app-vue3-history/home" icon={<DesktopOutlined />}>
                <Link to="/app-vue3-history/home">vue3-history项目 home 页面</Link>
              </Menu.Item>
              <Menu.Item key="/app-vue3-history/about" icon={<FileOutlined />}>
                <Link to="/app-vue3-history/about">vue3-history项目 about 页面</Link>
              </Menu.Item>
            </Menu>
          </Sider>
          <Layout className="site-layout">
            <Header className="site-layout-background" style={{ padding: 0 }} />
            <Content style={{ margin: '0 16px' }}>
              <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
                <Switch>
                  <Route path="/home" exact component={Home} />
                  <Route path="/about" component={About} />
                </Switch>
                <div id="container"></div>
              </div>
            </Content>
          </Layout>
        </Layout>
      </Router>
    </div>
  );
}

